<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ollama API 测试工具</title>
  <link rel="stylesheet" href="src/style.css">
</head>

<body>
  <div id="app">
    <div class="header">
      <h1>Ollama API 测试工具</h1>
      <button id="themeToggle" class="theme-toggle">
        <span class="theme-icon">🌙</span>
      </button>
    </div>
    
    <div class="form-group url-group">
      <label for="url">API 地址:</label>
      <div class="url-input-group">
        <select id="urlSelect" class="url-select">
          <option value="custom">自定义地址</option>
          <option value="http://localhost:11434/api/generate" selected>生成 /api/generate</option>
          <option value="http://localhost:11434/api/chat">对话 /api/chat</option>
          <option value="http://localhost:11434/api/embeddings">向量 /api/embeddings</option>
          <option value="http://localhost:11434/api/pull">拉取模型 /api/pull</option>
          <option value="http://localhost:11434/api/tags">模型列表 /api/tags</option>
          <option value="http://localhost:11434/api/show">模型信息 /api/show</option>
          <option value="http://localhost:11434/api/copy">复制模型 /api/copy</option>
          <option value="http://localhost:11434/api/delete">删除模型 /api/delete</option>
        </select>
        <input type="text" id="url" placeholder="输入自定义 API 地址">
      </div>
    </div>
    
    <div class="form-row">
      <div class="form-group method-group">
        <label for="method">请求方法:</label>
        <select id="method" class="method-select">
          <option value="GET">GET</option>
          <option value="POST" selected>POST</option>
          <option value="DELETE">DELETE</option>
        </select>
      </div>
      <div class="form-group timeout-group">
        <label for="timeout">超时 (秒):</label>
        <input type="number" id="timeout" value="30" min="1" max="300">
      </div>
      <button id="sendRequest" class="send-button">发送请求</button>
    </div>

    <div class="form-group params-group">
        <div class="params-container">
            <div class="params-header">
                <div class="params-title">
                    <span class="toggle-icon">▼</span>
                    <label for="params">请求参数</label>
                </div>
                <div class="params-tools">
                    <select id="templateSelect" class="template-select">
                        <option value="">选择模板</option>
                    </select>
                    <button id="formatParams" class="tool-button">
                        <span class="button-icon">⚙️</span>格式化
                    </button>
                </div>
            </div>
            <div class="params-content">
                <textarea id="params" spellcheck="false"></textarea>
            </div>
        </div>
    </div>

    <div id="loading" class="loading">
      <div class="spinner"></div>
      <span>请求中...</span>
    </div>

    <div class="response-container">
      <div class="response-header">
        <div class="response-title">
          <span class="toggle-icon">▼</span>
          <h2>响应结果</h2>
        </div>
        <div class="response-info">
          <span id="statusCode" class="status-code"></span>
          <button id="copyResponse" class="copy-button">
            <span class="button-icon">📋</span>复制
          </button>
        </div>
      </div>
      <pre id="responseOutput" class="response"></pre>
    </div>

    <div id="confirmDialog" class="dialog-overlay">
      <div class="dialog">
        <h3>确认清空历史</h3>
        <p>确定要清空所有历史记录吗？清空后可以通过"撤销"按钮恢复。</p>
        <div class="dialog-buttons">
          <button id="cancelClear" class="dialog-button cancel">取消</button>
          <button id="confirmClear" class="dialog-button confirm">确认清空</button>
        </div>
      </div>
    </div>

    <div id="deleteDialog" class="dialog-overlay">
      <div class="dialog">
        <h3>确认删除</h3>
        <p>确定要删除这条历史记录吗？删除后可以通过"撤销"按钮恢复。</p>
        <div class="dialog-buttons">
          <button id="cancelDelete" class="dialog-button cancel">取消</button>
          <button id="confirmDelete" class="dialog-button confirm">确认删除</button>
        </div>
      </div>
    </div>

    <div class="history-panel">
        <div class="history-header">
            <div class="history-title">
                <span class="toggle-icon">▼</span>
                <h2>请求历史</h2>
            </div>
            <div class="history-actions">
                <button id="exportHistory" class="history-button export">
                    <span class="button-icon">📥</span>导出历史
                </button>
                <button id="undoHistory" class="history-button undo" style="display: none">
                    <span class="button-icon">↩️</span>撤销清空
                </button>
                <button id="clearHistory" class="history-button clear">
                    <span class="button-icon">🗑️</span>清空历史
                </button>
            </div>
        </div>
        <div class="history-content">
            <div id="historyList" class="history-list"></div>
        </div>
    </div>
  </div>
  <script type="module" src="src/main.ts"></script>
</body>

</html>